<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
	xmlns:h="http://xmlns.jcp.org/jsf/html"
	xmlns:f="http://xmlns.jcp.org/jsf/core"
	xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
	xmlns:pt="http://xmlns.jcp.org/jsf/passthrough">

<h:head>
	<title>Add and Edit User</title>
</h:head>

<h:body>

	<ui:composition template="common.xhtml">
		<ui:define name="content">
			<div class="row">
				<div class="col-lg-12">
					<h1 class="page-header">Users Management</h1>
				</div>
			</div>
			<div class="row">
				<div class="col-lg-12">
					<div class="panel panel-default">
						<div class="panel-heading text-center">
							<!-- ${userManagement.msg > 0 ? 'Add new user' : 'Edit user'} -->
							Add new User
						</div>
						<div class="panel-body">
							<div class="row">
								<f:view>
									<h:form role="form">
										<div class="col-lg-6">
											<div class="form-group">
												<label>User Name:</label>
												<h:inputText class="form-control"
													value="${userManagement.user.userName}" id="userName"
													pt:placeholder="Enter user name" />
											</div>
											<div class="form-group">
												<label>Password:</label>
												<h:inputSecret class="form-control"
													value="#{userManagement.user.pwd}" id="newpass"
													pt:placeholder="Enter password" />
											</div>
											<div class="form-group">
												<label>Full Name:</label>
												<h:inputText class="form-control"
													value="#{userManagement.user.fullName}" id="fullname"
													pt:placeholder="Enter full name" />
											</div>
											<div class="form-group">
												<label>Birthday:</label>
												<h:inputText class="datetimepicker form-control"
													value="#{userManagement.user.birthOfDay}" id="birthday"
													pt:placeholder="Enter birthday">
													<f:convertDateTime pattern="dd-MM-yyyy" />
												</h:inputText>
											</div>
											<div class="form-group">
												<label>Gender:</label>
												<h:selectOneRadio value="#{userManagement.user.gender}">
													<f:selectItem itemValue="0" itemLabel="Male" />
													<f:selectItem itemValue="1" itemLabel="Female" />
												</h:selectOneRadio>
											</div>
										</div>
										<div class="col-lg-6">
											<div class="form-group">
												<label>ID Card:</label>
												<h:inputText class="form-control"
													value="#{userManagement.user.idCard}" id="idcard"
													pt:placeholder="Enter ID Card" />
											</div>
											<div class="form-group">
												<label>Address:</label>
												<h:inputText class="form-control"
													value="#{userManagement.user.address}" id="address"
													pt:placeholder="Enter address" />
											</div>
											<div class="form-group">
												<label>Email:</label>
												<h:inputText class="form-control"
													value="#{userManagement.user.email}" id="email"
													pt:placeholder="Enter email address" />
											</div>
											<div class="form-group">
												<label>Phone:</label>
												<h:inputText class="form-control"
													value="#{userManagement.user.phoneNumber}" id="phone"
													pt:placeholder="Enter phone number" />
											</div>
											<div class="form-group">
												<label>Role:</label>
												<h:selectOneMenu class="form-control"
													value="#{userManagement.user.role}"
													converter="#{roleConverter}">
													<f:selectItems value="#{userManagement.role}" var="role"
														itemValue="#{role}" itemLabel="#{role.roleName}" />
												</h:selectOneMenu>
											</div>
										</div>
										<div class="col-lg-12 text-center">
											<h:commandButton class="btn btn-outline btn-primary"
												value="Submit"
												actionListener="#{userManagement.createUser(even)}" />
											<button type="reset" class="btn btn-outline btn-primary">Reset</button>
										</div>
									</h:form>
								</f:view>
							</div>
						</div>
					</div>
				</div>
			</div>
		</ui:define>
	</ui:composition>

</h:body>

</html>